<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="renderer" content="webkit"> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 
<meta name="format-detection" content="telephone=no" /> 
<link rel="shortcut icon" href="images/logo.ico" />
<title>闪度生活</title>
<meta name="keywords" content=" " />
<meta name="description" content=" " />


<link rel="stylesheet" type="text/css" href="css/common.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/font-awesome.css">
<link rel="stylesheet" type="text/css" href="css/swiper-3.4.1.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">

<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/easing.js"></script>
<script src="js/swiper-3.4.1.min.js"></script>
<script src="js/index.js"></script>
<script src="js/main.js"></script>

<script src="./js/vue.js"></script>
<script src="./js/axios.min.js"></script>
<script src="./js/axios-config.js"></script>
<script src="./js/js.cookie.js"></script>
<script src="./js/utils.js"></script>

</head>

<body>

<div id="app" v-cloak>

<div class="lianxi_show">
    <div class="lianxi_show_bg"></div>
    <div class="lianxi_show_con">
        <h5>4008089949</h5>
        <div class="lianxi_show_con_f1">
            <a href="##">取消</a>
            <a href="tel:4008089949" class="active">拨打电话</a>
        </div>
    </div>
</div>


<!--  / header  -->
<div class="header_longevity">
    <div class="header_map_longevity">   
        <img src="images/jiantou.png" alt="">
        <span>返回</span>
    </div>
    <div class="logo_longevity">行程介绍</div>  
</div>
<!--  / header  -->

<div class="banner">
  <div class="swiper-container swiper-container-banner">
    <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="items1 in energetic_fitnessDetail.pic_list"><img :src="items1" width="100%"></div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination swiper-pagination-banner"></div>
  </div>
</div>

<!--  / tourItinerary  -->
<div class="tourItinerary">
    <div class="tourItinerary1">
        <p class="tourItinerary1-content1">{{energetic_fitnessDetail.tourist_name}}</p>
        <div class="tourItinerary1-content2 clearfix">
            <span class="tourItinerary1-content2-text1"><i>￥<em>{{energetic_fitnessDetail.price}}.00</em></i>/人</span>
            <span class="tourItinerary1-content2-text2">已报名 : <i> {{energetic_fitnessDetail.reg_number}}</i>人</span>
        </div>
        
    </div>
    <div class="tourItinerary2">
        <p class="tourItinerary2-text1">行程介绍:</p>
		<div class="track-rcol">
                <div class="track-list">
                    <ul>
                        <li class="first">                            
                            <span class="txt">{{energetic_fitnessDetail.tourist_details}}</span>
                        </li>
                        <li v-for="items2 in energetic_fitnessDetail.trip">
                            <span class="txt1">{{items2.show_time}}</span>
                            <i class="node-icon"></i>
                            <span class="time">{{items2.trip_name}} <i>{{items2.trip_title}}</i> </span>
                            <span class="txt">{{items2.trip_detail}}</span>
                        </li>
                    </ul>
                </div>
        </div>
	</div>
</div>
<!--  / tourItinerary  -->


<!--  / footer  -->
<div class="footer1">
    <ul class="clearfix">
      <li class="footer1-left">联系我们</li>
      <li class="footer1-right"> 预约订购</li>
    </ul>
</div> 
<!--  / footer  -->

</div> 

</body>
<script>
$(window).ready(function(){

    var vm = new Vue({
        el:"#app",
        data(){
          return{
            energetic_fitnessDetail:[],
          }
        },
        created:function(){
          var $this = this;
          $this.getTourItinerary();                                          
         },
        mounted:function(){
          
        },
        methods:{
          //行程详情介绍
            getTourItinerary:function(){
                var $this = this;
                const data = {
                   tourist_id:getCookie("touristId"),
                }
                Axios.post(window.Url.energetic_fitnessDetail,data).then((res) => {
                  
                  if(res.result == 1){
                    $this.energetic_fitnessDetail = res.info.tourist;   

                    $this.$nextTick(function () {
                        var mySwiper_banner = new Swiper ('.swiper-container-banner', {
                            loop: true,
                            pagination: '.swiper-pagination-banner',
                            autoplay : 5000,
                            autoplayDisableOnInteraction : false,
                        }) 
                    })                               
                  }else
                  {
                    console.log("行程详情介绍:"+res.info);
                  }
                  
                }).catch((err) => {
                  console.log("行程详情介绍:"+err);
                })
              
            },
         
        }

    })

$('.banner').height($(window).width()*400/750);


$('.header_map_longevity').click(function(){
    history.go(-1);
});
$('.footer1-right').click(function(){
    window.location.href = "reservationPayment.html";
});
$('.footer1-left').click(function(){
    $('.lianxi_show').css('display','block');
})
$('.lianxi_show_con_f1 a').click(function(){
    $('.lianxi_show').css('display','none');
})
$('.bg4').click(function(){
      $('.pinglun1_show').css('display','block');
})

  
})  
</script>
</html>
